<!DOCTYPE html>
<html lang="en">
<head>
     <script type="text/javascript" src="jscolor/jscolor.js"></script>
     <script type="text/javascript" src="haima.js"></script>
     <script type="text/javascript" src="jquery.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,minimum-scale=1,user-scalable=yes">
  <meta charset="UTF-8">
  <title>邀请有礼</title>
  <style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  #advContain{
    width: 100%;
    height: 300px;
  }
  .contain{
    width: 100%;
    height: 300px;    
  }
 #logContain{
  width: 200px;
  height: 80px;
  margin:auto;
 }
 .logImg{
  width: 200px;
  height: 80px;
 }
 #iphone{
  position: relative;
  margin:auto;
  margin-top: 40px;
  color:white;
  font-weight: 800;
  letter-spacing:2px;
  font-size: 20px;
  border: none;
  border-radius:5px; 
  background:#FF7A70; 
  display: block;
  width: 200px;
  height: 40px;

 }
 #android{
  position: relative;
  margin:auto;
  margin-top: 20px;
  color:white;
  font-weight: 800;
  letter-spacing:2px;
  font-size: 20px;
  border: none;
  border-radius:5px; 
  background:#FF086B; 
  display: block;
  width: 200px;
  height: 40px;
 }
 .iphlog{
  margin-left:-130px; 
  width: 25px;
  height: 30px;
 }
 .andlog{
  margin-left:-130px;
  width: 28px;
  height: 28px;

 }
 .span1{
  position: absolute;
  left:60px;
  bottom: 5px;
 }
 .span2{
    position: absolute;
    left:60px;
    bottom: 5px;
 }
  </style>
</head>
<body>
<!-- <input type="text" class="color">  -->
  <div id="advContain"><img src="inv1_adv.png" alt="" class="contain"></div>
  <div id="logContain"><img src="log.png" alt="" class="logImg"></div>
  <button id="iphone"><img src="iphone.png" class="iphlog"><span class="span1">iPhone用户</span></button>
  <button id="android"><img src="android.png" class="andlog"><span class="span2">Android用户</span></button>
</body>
</html>